<template>
    <div
        class="container"
        @mousedown="mousedown($event)"
        @mousemove="mousemove($event)"
        @mouseup="mouseup()"
        @mousewheel="mousewheel($event)"
        @mouseleave="mouseleave()"
    >
        <div class="box" :style="boxStyle">
            <div class="item" v-for="(item, index) in styleList" :style="item" :key="index"></div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MouseTransform from "@/utils/mouse_transform";
import img1 from "./images/1.jpg";
import img2 from "./images/2.jpg";
import img3 from "./images/3.jpg";
import img4 from "./images/4.jpg";
import img5 from "./images/5.jpg";
import img6 from "./images/6.jpg";
import img7 from "./images/7.jpg";
import img8 from "./images/8.jpg";
import img9 from "./images/9.jpg";
import img10 from "./images/10.jpg";
import img11 from "./images/11.jpg";

export default defineComponent({
    data() {
        return {
            styleList: [
                { backgroundImage: `url(${img1})`, transform: null },
                { backgroundImage: `url(${img2})`, transform: null },
                { backgroundImage: `url(${img3})`, transform: null },
                { backgroundImage: `url(${img4})`, transform: null },
                { backgroundImage: `url(${img5})`, transform: null },
                { backgroundImage: `url(${img6})`, transform: null },
                { backgroundImage: `url(${img7})`, transform: null },
                { backgroundImage: `url(${img8})`, transform: null },
                { backgroundImage: `url(${img9})`, transform: null },
                { backgroundImage: `url(${img10})`, transform: null },
                { backgroundImage: `url(${img11})`, transform: null },
            ],
            mt: null as MouseTransform,
            transform: {
                rotateX: -10,
                rotateY: 0,
                translateZ: 0,
            },
        };
    },
    computed: {
        boxStyle(): any {
            return {
                transform:
                    "translateZ(" +
                    this.transform.translateZ +
                    "px) rotateX(" +
                    this.transform.rotateX +
                    "deg) rotateY(" +
                    this.transform.rotateY +
                    "deg)",
            };
        },
    },
    methods: {
        init() {
            // 初始化鼠标变换工具
            this.mt = new MouseTransform(this.transform);
            // let len = 11;
            // 添加相册列表
            // for (let i = 1; i <= len; i++) {
            // let url = require("./img/" + i + ".jpg");
            // this.list.push({
            //     style: {
            //         backgroundImage: `url(${url})`,
            //     },
            // });
            // }
            setTimeout(() => {
                // 添加变换样式
                for (let i = 0; i < this.styleList.length; i++) {
                    this.styleList[i].transform = `rotateY(${
                        360 - (360 / this.styleList.length) * i
                    }deg) translateZ(350px)`;
                }
            }, 10);
        },
        mousedown(event: MouseEvent) {
            this.mt.mousedown(event);
        },
        mousemove(event: MouseEvent) {
            this.mt.mousemove(event);
        },
        mouseup() {
            this.mt.mouseup();
        },
        mousewheel(event: WheelEvent) {
            this.mt.mousewheel(event);
        },
        mouseleave() {
            this.mt.mouseleave();
        },
    },
    created() {
        this.init();
    },
});
</script>
<style scoped lang="scss" src="./album.scss"></style>
